<template lang="html">
    <div class="rightFloat_styl" >
        <div class="left_item" v-for="(item, index) in leftItemList" :key="index">
            <div
              class="item_name"
              :class="[index == chooseLeftIndex ? 'item_name_copy' : '']"
              @click="chooseLeftIndex = index"
            >{{ item.name }}</div>
            <Lines
              v-if="index != leftItemList.length-1"
              widthNum="22px"
              heightNum="1px"
              backColor="#D8D8D8"
              marginUpdown="10px"
            ></Lines>
        </div>
    </div>
</template>
 
<script>
export default {
  name: "Front-LeftFloat",
  data() {
    return {
      chooseLeftIndex: 0,
      leftItemList: [
        {
          index: 0,
          name: "商城推荐"
        },
        {
          index: 1,
          name: "最新求购"
        },
        {
          index: 2,
          name: "51指数"
        },
        {
          index: 3,
          name: "热门资讯"
        },
        {
          index: 4,
          name: "精选好店"
        },
        {
          index: 5,
          name: "51推荐"
        },
        {
          index: 6,
          name: "51融服"
        }
      ]
    };
  },
  watch: {},
  mounted() {},
  methods: {}
};
</script>
 
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
.rightFloat_styl {
  width: 49px;
  padding: 15px 9px;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  .left_item {
    .flex-y(center);
    .item_name {
      cursor: pointer;
    }
    .item_name_copy {
      color: @themeColor;
    }
  }
}
</style>